$(() => {
//     显示所有类别,有层级关系
    displayAllCategories();
//  显示所有类别，无层级关系
    displayAllCats();
//  点击查看快速一览
    $(".quick-view-btn").click(function (e){
        e.preventDefault();
        let targetId=$(this).data("goods-id");
        //渲染快速一览，因为需要有goodsA，需要动态生成
        let goodsA=goods.find(good => good.id === targetId);
        renderQuickView(goodsA);
        $("#quickViewModal").modal("show");
    })

//     点击购物车添加商品
    $(".add-to-cart").click (function (e) {
            e.preventDefault();
            const url = ctx + "/front/api/v1/shop/cart";
            let goodsId = $(this).data("goods-id");//在前端设置的data-goods-id里的
            // 异步请求
            $.ajax({
                url,
                method: "post",
                data: {
                    goodsId,
                    quantity: 1 //数量不能设置，默认为1
                },
                success(resp) {
                    if (resp.success) {
                        layer.msg("添加购物车成功");
                    } else {
                        layer.msg(resp.msg||"添加购物车失败");
                    }
                }, error(resp) {
                    if (resp.status === 401) {
                        layer.msg("账号状态为空,需要登录", {
                            icon: 0, // 图标类型，0 表示警告图标
                            time: 1000,
                            end: function () {
                                // 消息提示框关闭后执行的回调函数
                                location.href = ctx + "/vm/front/login";
                            }
                        });
                    }

                }
            })
        })
//     点击收藏添加商品
    $(".add-to-wi").click(function (e){
        e.preventDefault();
        const url = ctx + "/front/api/v1/shop/wishlist";
        let goodsId = $(this).data("goods-id");//在前端设置的data-goods-id里的
        // 异步请求
        $.ajax({
            url,
            method: "post",
            data: {
                goodsId,
            },
            success(resp) {
                if (resp.success) {
                    layer.msg("添加收藏成功");
                } else {
                    layer.msg(resp.msg||"添加收藏失败");
                }
            }, error(resp) {
                if (resp.status === 401) {
                    layer.msg("账号状态为空,需要登录", {
                        icon: 0, // 图标类型，0 表示警告图标
                        time: 1000,
                        end: function () {
                            // 消息提示框关闭后执行的回调函数
                            location.href = ctx + "/vm/front/login";
                        }
                    });
                }

            }
        })

    })

//  点击添加到购物车，可以设置数量
    $(".add-to-cart-num").click(function () {
        const url = ctx + "/front/api/v1/shop/cart";
        let qty = parseInt($(".qty-val").text());//购买数量
        // console.log(qty);
        let goodsId = $(this).data("goods-id");//在前端设置的data-goods-id里的

        $.ajax({
            url,
            method: "post",
            data: {
                goodsId,
                quantity:qty
            },
            success(resp) {
                if (resp.success) {
                    layer.msg("添加购物车成功");
                } else {
                    layer.msg("添加购物车失败");
                }
            }, error(resp) {
                if (resp.status === 401) {
                    layer.msg("账号状态为空,需要登录", {
                        icon: 0, // 图标类型，0 表示警告图标
                        time: 1000,
                        end: function () {
                            // 消息提示框关闭后执行的回调函数
                            location.href = ctx + "/vm/front/login";
                        }
                    });
                }

            }
        })
    })
//     获取优惠码
    $(".get-coupon").click(function (){
        const url = ctx + "/front/api/v1/shop/coupon";
        $.ajax({
            url,
            method: "post",
            success(resp) {
                if (resp.success) {
                    layer.msg("获取优惠码成功");
                    // 将优惠码显示出来
                    $(".coupon-code").val(resp.data).attr("disabled",true);
                } else {
                    layer.msg(resp.msg||"获取优惠码失败",{icon:0});
                }
            }, error(resp) {
                if (resp.status === 401) {
                    layer.msg("账号状态为空,需要登录", {
                        icon: 0, // 图标类型，0 表示警告图标
                        time: 1000,
                        end: function () {
                            // 消息提示框关闭后执行的回调函数
                            location.href = ctx + "/vm/front/login";
                        }
                    });
                }

            }
        })
    })

})

//      展示所有的种类
function displayAllCategories() {
    const url = ctx + "/sys/api/v1/category/tree";
    $.ajax({
        url,
        method: "get",
        success(resp) {
            if (resp.success) {
                let root = resp.data[0];
                // console.log(resp);
                let cats1 = root.children;
                // 填充分类表
                $("#categories").empty();
                for (let cat1 of cats1) {//遍历一级分类
                    let $li = $("<li>");
                    if (Array.isArray(cat1.children) && cat1.children.length > 0) {//如果有二级菜单
                        $li.addClass("has-children");
                    }

                    let $a = $("<a>").text(cat1.name).attr("href", ctx + "grid?categoryId=" + cat1.id);
                    if (cat1.iconCls) {
                        $("<i>").addClass(cat1.iconCls).prependTo($a);
                    }
                    $li.append($a);

                    if (Array.isArray(cat1.children) && cat1.children.length > 0) {//如果有二级菜单
                        //添加二级菜单ul
                        let $ul_2 = $("<ul>").addClass("dropdown-menu");
                        for (let cat2 of cat1.children) {//遍历二级菜单
                            let $li = $("<li>");//二级菜单
                            let $a = $("<a>").text(cat2.name).attr("href", ctx + "grid?categoryId=" + cat2.id);
                            $li.append($a);

                            //如果有三级菜单
                            if (Array.isArray(cat2.children) && cat2.children.length > 0) {
                                $li.addClass("has-children");
                                let $ul_3 = $("<ul>").addClass("dropdown-menu");//三级分类
                                for (let cat3 of cat2.children) {
                                    let $li = $("<li>");//三级菜单
                                    let $a = $("<a>").text(cat3.name).attr("href", ctx + "grid?categoryId=" + cat3.id);
                                    $li.append($a);
                                    $ul_3.append($li);
                                }
                                $li.append($ul_3);
                            }
                            $ul_2.append($li);
                        }
                        $li.append($ul_2);
                    }

                    $("#categories").append($li);
                }

            }
        }

    })
}

function displayAllCats() {
    const url = ctx + "/sys/api/v1/category/all";
    $.ajax({
        url,
        method: "get",
        success(resp) {
            if (resp.success) {
                $(".search-style-2>form>select").empty();
                resp.data.forEach(cat => {
                    const option = `<option value="${cat.id}">${cat.name}</option>`;
                    $(".search-style-2 > form > select").append(option);
                });
            }
        }
    })

}
//      渲染快速一览
function renderQuickView(goodsA) {
    let $qv=$("#quickViewModal");
    // 商品介绍
    $qv.find(".title-detail").text(goodsA.name);
    if(goodsA.brand){
        $qv.find(".pro-details-brand").text('品牌: '+goodsA.brand.name)
    }
    $qv.find(".new-price").text('$'+goodsA.price);
    $qv.find(".old-price").text('$'+goodsA.markPrice);
    $qv.find(".short-desc>p").text(goodsA.summary);
    if(goodsA.markPrice!=null||goodsA.price>goodsA.markPrice){
        $qv.find(".save-price").text(((1 - goodsA.price / goodsA.markPrice) * 100).toFixed(2) + '% Off');
    }
    $qv.find(".sku").text('SKU编号: '+goodsA.skuNo);
    if(goodsA.category){
        $qv.find(".cat").text('种类: '+goodsA.category.name);
    }
    if(goodsA.qty>0){
        $qv.find(".in-stock").text(goodsA.qty+'件');
    }else {
        $qv.find(".in-stock").text('缺货');
    }



    // 渲染主图片
    let $imageSlider=$qv.find(".product-image-slider");
    $imageSlider.empty();
    const $figure = $("<figure>").attr("class","border-radius-10");
    const $mainImage=$("<img>").attr("src","/assets/"+goodsA.pic).attr("alt","产品图片") ;
    $figure.append($mainImage);
    $imageSlider.append($figure);

    }
